<template>
  <div id="vmleft">
    <VmPanel>
      <template #panelcontent>
        <i>主要疫情国家治愈率</i>
        <div class="chart one"></div>
      </template>
    </VmPanel>
    <VmPanel>
      <template #panelcontent>
        <i>世界每周新增治愈和死亡人数</i>
        <div class="chart two"></div>
      </template>
    </VmPanel>
    <VmPanel>
      <template #panelcontent>
        <i>境外输入病情top10省份</i>
        <div class="chart three"></div>
      </template>
    </VmPanel>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, reactive, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import $ from 'jquery'
import VmPanel from './common/VmPanel.vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter
const route = useRoute
const store = useStore
const data = reactive({
  list: {},
  cha4name: [],
  cha4arr: [],
  cha5date: [],
  cha5heal: [],
  cha5dead: [],
  cha5confirm: [],
  cha6province: [],
  cha6: [],
  cha6importedCase: []
})

onMounted(() => {
  if (data.cha4name.length == 0) {
    $.ajax({
      url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign',
      dataType: 'jsonp',
      success: function (res) {
        console.log(JSON.parse(res.data))
        data.list = JSON.parse(res.data)
        console.log(data.list, 56)
        //右1
        // console.log(data.list.countryAddConfirmRankList,52);
        data.list.foreignList.slice(0, 5).forEach((item) => {
          data.cha4name.push(item.name)
          data.cha4arr.push(Math.round((item.heal / item.confirm) * 100))
        })
        renderEch4()
        //右二
        data.list.globalDailyHistory.forEach((item) => {
          data.cha5date.push(item.date)
          data.cha5heal.push(item.all.heal)
          data.cha5dead.push(item.all.dead)
          // data.cha5confirm.push(item.confirm)
        })
        renderEch5()
        //右三
        data.list.importStatis.TopList.forEach((item) => {
          // data.cha6province = item.province
          // data.cha6importedCase = item.importedCase
          data.cha6.push({ name: item.province, value: item.importedCase })

          // console.log(item);
        })
        renderEch6()
      }
    })
  }

  function renderEch4() {
    var myChart4 = echarts.init(document.querySelector('.one'))

    var valdata = data.cha4arr
    // console.log(data.cha4confirm);
    var titlename = data.cha4name
    var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6']

    myChart4.setOption({
      grid: {
        top: '5%',
        left: '22%',
        bottom: '15%'
        // containLabel: true
      },
      xAxis: {
        show: false
      },
      yAxis: [
        {
          show: true,
          data: titlename,
          inverse: true,
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            // formatter: function(value, index) {
            //   return [
            //     '{lg|' + (index + 1) + '}' + '{title|' + value + '} '
            //   ].join('\n')
            // },
            rich: {
              lg: {
                backgroundColor: '#339911',
                color: '#fff',
                borderRadius: 15,
                // padding: 5,
                align: 'center',
                width: 10,
                height: 10
              }
            }
          }
        },
        {
          // show: true,
          // inverse: true,
          data: [],
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }
      ],

      series: [
        {
          name: '条',
          type: 'bar',
          yAxisIndex: 0,
          data: valdata,
          barWidth: 10,
          barHeight: 20,
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              myColor: function (params) {
                var num = myColor.length
                return myColor[params.dataIndex % num]
              }
            }
          },
          // 柱子之间的距离
          barCategoryGap: 50,
          //柱子的宽度
          barWidth: 10,
          label: {
            normal: {
              show: true,
              // position: 'inside',
              formatter: '{c}%'
            }
          }
        },
        {
          name: '框',
          type: 'bar',
          yAxisIndex: 1,
          barGap: '-100%',
          data: [100, 100, 100, 100, 100],
          barCategoryGap: 50,
          barWidth: 15,
          itemStyle: {
            normal: {
              color: 'none',
              borderColor: '#00c1de',
              borderWidth: 3,
              barBorderRadius: 15
            }
          }
        }
      ]
    })
  }
  function renderEch5() {
    var myChart5 = echarts.init(document.querySelector('.two'))
    var normalColor = '#94a1a9'
    var fontSize = 10
    var datas = {
      xData:data.cha5date,
      yData2:data.cha5dead,
      yData1:data.cha5heal,
      areaColor1: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          {
            offset: 0,
            color: 'rgba(35, 63, 181, 1)'
          },
          {
            offset: 0.8,
            color: 'rgba(2, 89, 120, 0.5)'
          }
        ],
        false
      ),
      areaColor2: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          {
            offset: 0,
            color: 'rgba(95, 194, 114, 1)'
          },
          {
            offset: 0.8,
            color: 'rgba(14, 108, 111, 0.5)'
          }
        ],
        false
      ),
      lineColor1: 'rgb(59, 194, 244)',
      lineColor2: 'rgb(107, 239, 150)'
    }
    myChart5.setOption({
      backgroundColor: '',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#57617B'
            }
        }
    },
    legend: {
        itemWidth: 25,
        itemHeight:8,
        itemGap: 13,
        data: ['死亡人数', '治愈人数'],
        textStyle: {
            fontSize:fontSize,
            color: '#fff'
        }
    },
    grid: {
        left: '2%',
        right: '4%',
        bottom: '3%',
        top:'10%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: normalColor
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: "dashed",
                color: normalColor
            }
        }, axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: fontSize
            }
        },
        data: datas.xData
    }, ],
    yAxis: [{
        type: 'value',
        name: '',
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: normalColor
            }
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: fontSize
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: "dashed",
                color: normalColor
            }
        },
    }],
    series: [{
        name: '死亡人数',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width:2
            }
        },
        areaStyle: {
            normal: {
                color: datas.areaColor1,
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            }
        },
        itemStyle: {
            normal: {
                color: datas.lineColor1,
                borderColor: 'rgba(137,189,2,0.27)',
                borderWidth: 12

            }
        },
        data: datas.yData1
    }, {
        name: '治愈人数',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 2
            }
        },
        areaStyle: {
            normal: {
                color: datas.areaColor2,
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            }
        },
        itemStyle: {
            normal: {
                color: datas.lineColor2,
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12

            }
        },
        data: datas.yData2
    }, ]


    })
  }

  function renderEch6() {
    let myChart6 = echarts.init(document.querySelector('.three'))

    myChart6.setOption({
      grid: {
        top: '25%'
      },

      title: {
        text: '  ',
        
        x: 'center'
      },
      label:{
fontsize:10
      },
      color: [
        '#37a2da',
        '#32c5e9',
        '#9fe6b8',
        '#ffdb5c',
        '#ff9f7f',
        '#fb7293',
        '#e7bcf3',
        '#8378ea'
      ],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
 
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          // dataView: { show: true, readOnly: false },
          magicType: {
            show: true,
            type: ['pie', 'funnel']
          }
          // restore: { show: true },
          // saveAsImage: { show: true }
        }
      },
      calculable: true,
      series: [
        {
          name: '',
          type: 'pie',
          radius: [10, 80],
          roseType: 'area',
          data: data.cha6
         
        }
        
      ]
    })
  }

  window.addEventListener(
    'resize',
    function () {
      myChart4.resize()
      myChart5.resize()
      myChart6.resize()
    },
    false
  )
})
</script>

<style scoped lang='scss'>
i {
  font-style: normal;
  font-size: 25px;
  letter-spacing: 2px;
}
.chart {
  width: 520px;
  height: 300px;
}
</style>